<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9-伪元素定位案例</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			body{
				background: #f5f7fa;
				line-height:1;
			}
			/* 子高父宽 */
			.box{
				width:270px;
				/* height:272px; */
				background:#FFFFFF;
				margin:30px auto;
				border-radius:6px;
			}
			.box a{
				/* width:270px; */
				height:272px;
				display: block;
				box-sizing: border-box;
				position: relative;
			}
			.box a::before{
				content: '';
				width: 65px;
				height:25px;
				display: block;
				background: url(images/icon-new.png) no-repeat;
				background-size: 65px 25px;
				position: absolute;
				right:0;
				top: 0;
			}
			.box a img{
				width:100%;
				border-top-left-radius: 6px;
				border-top-right-radius:6px;
			}
			.box a p:nth-of-type(1){
				color:#545c63;
				font-size:12px;
				margin:13px 0 0 7px;
			}
			.box a p:nth-of-type(2){
				color:#9199a1;
				font-size:11px;
				margin: 15px 0 0 7px;
			}
			.box a p:nth-of-type(3){
				margin: 11px 0 0 7px;
			}
			.box a p:nth-of-type(3) span:first-child{
				width:58px;
				height:20px;
				display: inline-block;
				color: #fff;
				line-height:20px;
				text-align: center;
				font-size:11px;
				background: #f76e6e;
			}
			.box a p:nth-of-type(3) span:nth-child(2){
				color:#f01414;
				font-size:9px;
				font-weight:bold;
			}
			.box a p:nth-of-type(3) del{
				color: #6d7278;
				font-size:9px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="">
				<img src="images/m.png" alt="">
				<p>Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染</p>
				<p>高级 · 30人报名</p>
				<p>
					<span>限时优惠</span>
					<span>￥328.00</span>
					<del>￥368.00</del>
				</p>
			</a>
		</div>
	</body>
</html>
